<template>
  <a-list :class="prefixCls" bordered :pagination="getPagination">
    <template v-for="item in getData" :key="item.id">
      <a-list-item class="list-item" style="width: 260px">
        <a-list-item-meta>
          <template #title>
            <div class="title" style="display: flex">
              <!--              <a-typography-paragraph-->
              <!--                @click="handleTitleClick(item)"-->
              <!--                style="display: inline-block; margin-bottom: 0 !important"-->
              <!--                :style="{ cursor: isTitleClickable ? 'pointer' : '' }"-->
              <!--                :delete="!!item.titleDelete"-->
              <!--                :ellipsis="-->
              <!--                  $props.titleRows && $props.titleRows > 0-->
              <!--                    ? { rows: $props.titleRows, tooltip: !!item.title }-->
              <!--                    : false-->
              <!--                "-->
              <!--                :content="getTitle(item.type)"-->
              <!--              />-->
              <!--              <div class="extra" style="display: inline-block">-->
              <!--                <a-tag class="tag" size="small" :color="item.status === 0 ? 'red' : 'blue'">-->
              <!--                  {{ item.status }}-->
              <!--                </a-tag>-->
              <!--              </div>-->
            </div>
          </template>

          <template #description>
            <div>
              <div class="description" style="display: inline-block; color: rgba(0, 0, 0, 0.85)">
                <a-tag class="tag" :color="item.color" style="display: inline-block">
                  {{ item.type }}
                </a-tag>
                <!--                <a-typography-paragraph-->
                <!--                  style="font-size: 12px; width: 100%; margin-bottom: 0 !important"-->
                <!--                  :content="item.content"-->
                <!--                />-->
                {{ item.content }}
              </div>

              <div class="datetime" style="font-size: 12px">
                {{ item.createTime }}
              </div>
            </div>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>
<script lang="ts">
  import { computed, defineComponent, PropType, ref, watch, unref } from 'vue'
  import { ListItem } from './data'
  import { useDesign } from '/@/hooks/web/useDesign'
  import { List, Avatar, Tag, Typography } from 'ant-design-vue'
  import { isNumber } from '/@/utils/is'
  import { NoticeVO } from '/@/api/notice/model/noticeModel'
  export default defineComponent({
    components: {
      [Avatar.name]: Avatar,
      [List.name]: List,
      [List.Item.name]: List.Item,
      AListItemMeta: List.Item.Meta,
      ATypographyParagraph: Typography.Paragraph,
      [Tag.name]: Tag,
    },
    props: {
      list: {
        type: Array as PropType<NoticeVO[]>,
        default: () => [],
      },
      pageSize: {
        type: [Boolean, Number] as PropType<Boolean | Number>,
        default: 5,
      },
      currentPage: {
        type: Number,
        default: 1,
      },
      titleRows: {
        type: Number,
        default: 1,
      },
      descRows: {
        type: Number,
        default: 2,
      },
      onTitleClick: {
        type: Function as PropType<(Recordable) => void>,
      },
    },
    emits: ['update:currentPage'],
    setup(props, { emit }) {
      const { prefixCls } = useDesign('header-notify-list')
      const current = ref(props.currentPage || 1)
      const getData = computed(() => {
        const { pageSize, list } = props
        console.log('list', list)
        if (pageSize === false) return []
        let size = isNumber(pageSize) ? pageSize : 5
        return list.slice(size * (unref(current) - 1), size * unref(current))
      })
      watch(
        () => props.currentPage,
        (v) => {
          current.value = v
        },
      )
      const isTitleClickable = computed(() => !!props.onTitleClick)
      const getPagination = computed(() => {
        const { list, pageSize } = props
        if (pageSize > 0 && list && list.length > pageSize) {
          return {
            total: list.length,
            pageSize,
            size: 'small',
            current: unref(current),
            onChange(page) {
              current.value = page
              emit('update:currentPage', page)
            },
          }
        } else {
          return false
        }
      })

      function handleTitleClick(item: ListItem) {
        props.onTitleClick && props.onTitleClick(item)
      }

      const getTitle = (type) => {
        switch (type) {
          case 1:
            return '库存变动'
          case 2:
            return '订单提交'
          case 3:
            return '订单取消'
          case 4:
            return '订单发货'
        }
      }

      return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable, getTitle }
    },
  })
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-header-notify-list';

  .@{prefix-cls} {
    &::-webkit-scrollbar {
      display: none;
    }

    ::v-deep(.ant-pagination-disabled) {
      display: inline-block !important;
    }

    &-item {
      padding: 6px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;

      .title {
        margin-bottom: 8px;
        font-weight: normal;

        .extra {
          float: right;
          margin-top: -1.5px;
          margin-right: 0;
          font-weight: normal;

          .tag {
            margin-right: 0;
          }
        }

        .avatar {
          margin-top: 4px;
        }

        .description {
          font-size: 12px;
          line-height: 18px;
        }

        .datetime {
          margin-top: 4px;
          font-size: 12px;
          line-height: 18px;
        }
      }
    }
  }
</style>
